<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form ref="productInfo" :model="form" :rules="rules">
      <el-form-item label="授权品牌名" :label-width="formLabelWidth" prop="brand_id">
        <el-select v-model="form.brand_id" placeholder="请选择品牌名称" :disabled="isDisable">
          <el-option v-for="(item, index) in brand_list" :key="index" :label="item.brand_name" :value="item.id" />
          <el-button v-if="isMore" type="text" size="mini" style="width:100%" @click="getMore">更多品牌</el-button>
        </el-select>
      </el-form-item>
      <el-form-item label="产品代码" :label-width="formLabelWidth" prop="product_code_num">
        <el-input v-model="form.product_code_num" autocomplete="off" :disabled="isDisable" />
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth" prop="brand_product_name">
        <el-input v-model="form.brand_product_name" autocomplete="off" :disabled="isDisable" />
      </el-form-item>
      <el-form-item label="规格" :label-width="formLabelWidth" prop="gg">
        <el-input v-model="form.gg" autocomplete="off" :disabled="isDisable" />
      </el-form-item>
      <el-form-item label="单位" :label-width="formLabelWidth" prop="pany">
        <el-input v-model="form.pany" autocomplete="off" :disabled="isDisable" />
      </el-form-item>
      <el-form-item label="统一售价" :label-width="formLabelWidth" prop="price">
        <el-input v-model="form.price" autocomplete="off" :disabled="isDisable" />
      </el-form-item>
      <el-form-item label="商品展示图" :label-width="formLabelWidth" prop="brand_head_product_img">
        <el-upload
          :action="uploadUrl + '/oss_upload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :file-list="form.brand_head_product_img"
          :on-remove="handleBannerRemove"
          :on-success="handleBannerSuccess"
          :disabled="isDisable"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <span style="font-size:12px; color: #ccc">建议尺寸为 750 * 500</span>
      </el-form-item>
      <el-form-item label="商品详情图" :label-width="formLabelWidth" prop="brand_product_content">
        <el-upload
          :action="uploadUrl + '/oss_upload'"
          list-type="picture-card"
          :file-list="form.brand_product_content"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleContentRemove"
          :on-success="handleContentSuccess"
          :disabled="isDisable"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" :disabled="isDisable" @click="submitData('productInfo')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { deletePicture } from '@/api/main'
import { getBrandList, operationBrandProduct } from '@/api/brand'
import { disposeFile } from '@/utils/index'
export default {
  props: {
    operationType: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      isDisable: false,
      uploadUrl: process.env.VUE_APP_BASE_API,
      form: {
        brand_product_name: '',
        brand_id: '',
        price: '',
        brand_price: [],
        pany: '',
        gg: '',
        height: '',
        product_code_num: '',
        brand_product_content: [],
        brand_head_product_img: []
      },
      rules: {
        brand_product_name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        brand_id: [
          { required: true, message: '请选择产品品牌', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入统一零售价', trigger: 'blur' }
        ],
        pany: [
          { required: true, message: '请输入产品规格', trigger: 'blur' }
        ],
        gg: [
          { required: true, message: '请输入产品规格', trigger: 'blur' }
        ],
        product_code_num: [
          { required: true, message: '请输入产品代码', trigger: 'blur' }
        ],
        brand_product_content: [
          { required: true, message: '请选择产品详情图', trigger: 'change' }
        ],
        brand_head_product_img: [
          { required: true, message: '请选择产品展示图', trigger: 'change' }
        ]

      },
      formLabelWidth: '120px',
      title: this.operationType === '1' ? '新增产品' : '修改产品',
      dialogImageUrl: '',
      dialogVisible: false,
      p: 1,
      num: 100000,
      status: 1,
      brand_list: [],
      isMore: 0
    }
  },
  created() {
    this.getBrandList()
  },
  methods: {
    handleBannerRemove(file, fileList) {
      this.form.brand_head_product_img = disposeFile(fileList)
      let name = file.response.split('/')
      name = name[name.length - 1]
      // console.log(name)
      const data = {
        object: name
      }
      deletePicture(data).then(res => {
        // console.log(res)
        if (res.code === 200) {
          console.log('图片已删除')
        }
      })
    },
    handleContentRemove(file, fileList) {
      // console.log(file, fileList)
      this.form.brand_product_content = disposeFile(fileList)
      // console.log(this.form.brand_product_content)
      let name = file.response.split('/')
      name = name[name.length - 1]
      const data = {
        object: name
      }
      deletePicture(data).then(res => {
        // console.log(res)
        if (res.code === 200) {
          console.log('图片已删除')
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 商品展示图上传成功
    handleBannerSuccess(res, file, fileList) {
      console.log(res, fileList, file)
      const newFileList = disposeFile(fileList)
      console.log(newFileList)
      this.form.brand_head_product_img = newFileList
    },
    // 商品详情图上传成功
    handleContentSuccess(res, file, fileList) {
      const newFileList = disposeFile(fileList)
      this.form.brand_product_content = newFileList
    },
    getBrandList() {
      const data = {
        p: this.p,
        num: this.num,
        status: this.status
      }
      getBrandList(data).then(res => {
        console.log(res)
        if (res.list.length) {
          // this.total = Number(res.count)
          this.isMore = res.ok
          if (this.brand_list.length === 0) {
            // console.log('1')
            this.brand_list = res.list
          } else {
            // console.log(this.p)
            this.brand_list.push(...res.list)
          }
        }
      })
    },
    getMore() {
      this.p++
      this.getBrandList()
    },
    submitData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit')
          console.log('form', this.form)
          // this.form.brand_product_content = JSON.stringify(this.form.brand_product_content)
          // this.form.brand_head_product_img = JSON.stringify(this.form.brand_head_product_img)
          const data = {
            type: this.operationType,
            pro: this.form
          }
          operationBrandProduct(data).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.dialogFormVisible = false
              this.form = {
                brand_product_name: '',
                brand_id: '',
                price: '',
                brand_price: [],
                pany: '',
                gg: '',
                height: '',
                product_code_num: '',
                brand_product_content: [],
                brand_head_product_img: []
              }
              this.$message.success('产品信息，提交成功！')
              this.$emit('reloadFun')
            }
          })
        } else {
          console.log('err')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
